<template>
	<div class="ser_header_x">
		<div class="ser_header_l">
			<div class="ser_header_s clear">
				<div class="left"></div>
				<div class="right clear">
					<ul class="clear">
						<li v-for="item in ser_nav">
							<a :href="link">{{item}}</a>
						</li>
					</ul>
					<div class="search">
						<form action="" class="clear">
							<input type="text" placeholder="请输入您要搜索的问题" />
							<div class="search_result">搜索答案</div>
							<div class="search-question">
								<a :href="link">我要提问？</a>
							</div>
						</form>
					</div>
				</div>
				<div class="ser_login">
					您好：请
					<a :href="link">[登录]</a>
				</div>
			</div>
			<div class="ser_content clear">
				<!--<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
				<div class="con_left">
					<div class="title">
						常见问题分类
					</div>
					<div>
						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
							<el-submenu index="1">
								<template slot="title">帐号问题</template>
								<el-menu-item index="1-1" class="one">充值消费</el-menu-item>
								<el-menu-item index="1-2" class="one">帐号管理</el-menu-item>
							</el-submenu>
						</el-menu>
						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
							<el-submenu index="1">
								<template slot="title">交易问题</template>
								<el-menu-item index="1-1" class="one">道具交易</el-menu-item>
								<el-menu-item index="1-2" class="one">包装礼品</el-menu-item>
								
							</el-submenu>
						</el-menu>
						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
							<el-submenu index="1">
								<template slot="title">技术问题</template>
								<el-menu-item index="1-1" class="one">反作弊</el-menu-item>
								<el-menu-item index="1-2" class="one">客户端问题</el-menu-item>
							</el-submenu>
						</el-menu>

						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
							<el-submenu index="1">
								<template slot="title">游戏问题</template>
								<el-menu-item index="1-1" class="one">游戏功能</el-menu-item>
								<el-menu-item index="1-2" class="one">游戏介绍</el-menu-item>
								<el-menu-item index="1-2" class="one">道具想关</el-menu-item>
							</el-submenu>
						</el-menu>

						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
							<el-submenu index="1">
								<template slot="title">活动问题</template>
								<el-menu-item index="1-1" class="one">2015国际邀请赛</el-menu-item>
								<el-menu-item index="1-2" class="one">传承活动</el-menu-item>
								<el-menu-item index="1-2" class="one">2015亚洲邀请赛</el-menu-item>
								<el-menu-item index="1-1" class="one">PA至宝活动</el-menu-item>
								<el-menu-item index="1-2" class="one">网吧特权</el-menu-item>
								<el-menu-item index="1-2" class="one">年兽活动</el-menu-item>
								<el-menu-item index="1-2" class="one">冥魂之夜</el-menu-item>
								<el-menu-item index="1-2" class="one">夜魇暗潮</el-menu-item>
							</el-submenu>
						</el-menu>

						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
							<el-submenu index="1">
								<template slot="title">其他</template>
								<el-menu-item index="1-1" class="one">其他问题</el-menu-item>
							</el-submenu>
						</el-menu>
					</div>
				
					
				</div>
	
				<div class="con_right">
					<div class="hot_question">
						热门问题
					</div>
					<div class="hot_list">
						<ul>
							<li v-for="item in serList">
								<a :href="link">{{item}}</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data: function () {
		return {
			link: 'javascript:;'
		};
	},
	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}
	},
	props: {
		ser_nav: {
			type: Array,
			required: true
		},
		serLeftNav: {
			type: Object,
			required: true
		},
		serList: {
			type: Array,
			required: true
		}
	}
	// data: function () {
	// 	return {
	// 		link: 'javascript:;'
	// 	};
	// }
}
</script>
<style lang="scss">
.el-col-8 {
	width: 192px;
}
.one{
	height: 42px !important;
	line-height: 42px !important;
	padding-left: 20px !important;
	color: #eee !important;
}
.el-submenu__title {
	height: 42px;
	line-height: 42px;
	
}
.el-menu-item-group__title {
	height: 42px;
	line-height: 42px;
	padding-top: 0px;
	padding-left: 20px;
}

.ser_header_x {
	width: 100%;
	height: 920px;
	padding-bottom: 78px;
	background: #5d6969;
	position: relative;
	overflow: hidden;
	.ser_header_l {
		width: 1920px;
		height: 920px;
		background: url("../../img/service/ser.bg.jpg") no-repeat center center;
		position: absolute;
		left: 50%;
		margin-left: -960px;
		.ser_header_s {
			width: 982px;
			height: 200px;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
			.left {
				float: left;
				width: 192px;
				height: 200px;
				background: url("../../img/service/ser.logo.png") no-repeat 0 48px;
			}
			.right {
				float: left;
				width: 790px;
				height: 200px;
				background: url("../../img/service/ser.logo1.png") no-repeat -8px 50px;
				ul {
					margin-top: 68px;
					float: right;
					font-size: 14px;
					color: #999;
					li {
						float: left;
						width: 72px;
						height: 40px;
						margin-left: 30px;
						line-height: 40px;
						text-align: right;
						a {
							cursor: pointer;
							font-size: 17px;
							color: #7b7e7e;
							&.active {
								color: #f9521e;
							}
						}
					}
				}
				.search {
					width: 790px;
					height: 36px;
					margin-top: 30px;
					padding: 0;
					float: left;
					form {
						margin: 0;
						padding: 0;
						font-family: "Microsoft YaHei";
						font-size: 14px;
						color: #999;
						input {
							display: block;
							width: 550px;
							height: 36px;
							line-height: 36px;
							font-size: 15px;
							border: none;
							outline: none;
							padding-left: 10px;
							color: #000;
							vertical-align: baseline;
							float: left;
						}
						.search_result {
							float: left;
							height: 36px;
							width: 110px;
							line-height: 36px;
							text-align: center;
							font-size: 15px;
							color: #fff;
							cursor: pointer;
							background-color: #f16236;
						}
						.search-question {
							float: right;
							display: block;
							height: 36px;
							width: 110px;
							line-height: 36px;
							text-align: center;
							font-size: 15px;
							color: #fff;
							cursor: pointer;
							background: #13a7a9;
							a {
								display: block;
								height: 36px;
								width: 110px;
								line-height: 36px;
								text-align: center;
								font-size: 15px;
								color: #fff;
								cursor: pointer;
							}
						}
					}
				}
			}
			.ser_login {
				position: absolute;
				top: 16px;
				right: 0;
				height: 26px;
				padding: 0 15px;
				border: 1px solid #ccc;
				color: #ccc;
				line-height: 26px;
				text-align: center;
				cursor: pointer;
				a {
					margin: 0;
					padding: 0;
					font-family: "Microsoft YaHei";
					font-size: 14px;
					color: #999;
				}
			}
		}
		.ser_content {
			width: 982px;
			min-height: 645px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			background-color: #fff;
			.con_left {
				float: left;
				width: 192px;
				height: 100%;
				background-color: #293034;
				position: absolute;
				top: 0;
				bottom: 0;
				.title {
					background-color: #13a7a9;
					padding-left: 30px;
					height: 46px;
					line-height: 46px;
					font-size: 15px;
					color: #eee;
					cursor: default;
				}
			}
			.con_right {
				float: right;
				width: 720px;
				min-height: 645px;
				background-color: #fff;
				padding: 0 35px;
				.hot_question {
					height: 45px;
					line-height: 50px;
					color: #f9521e;
					font-weight: bold;
					font-size: 15px;
					cursor: default;
				}
				.hot_list {
					min-height: 216px;
					width: 716px;
					border: 2px solid #d9dddf;
					padding: 15px 0;
					background: url("../../img/service/cm.png") no-repeat right 10px;
					margin-bottom: 30px;
					ul {
						font-family: "Microsoft YaHei";
						font-size: 14px;
						color: #999;
						li {
							height: 26px;
							width: 500px;
							line-height: 26px;
							background: url("../../img/service/arrow.jpg") no-repeat 24px 9px;
							padding-left: 38px;
							color: #8f8f8f; // overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							a {
								font-family: "Microsoft YaHei";
								font-size: 14px;
								color: #999;
								&:hover {
									text-decoration: underline;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>

